<template>
  <div>
    <h1>vue3生命周期</h1>
  </div>
</template>

<script>
/**
 * **使用步骤**
1. 先从vue中导入以`on打头`的生命周期钩子函数
2. 在setup函数中调用生命周期函数并传入回调函数
3. 生命周期钩子函数可以调用多次
注意⚠️：
1. 只能在当前组件setup中使用这些on开头的钩子函数
2. 用法vue2的钩子函数几乎无异，使用时记得导入
3. 可以和vue2钩子函数并用，**先执行on开头的钩子函数**
 */
import { onMounted } from 'vue'
export default {
  setup () {
    onMounted(() => {
      /**
       * 使用场景：
       * 1. 发送ajax请求
       * 2. 操作dom
       */
      console.log('vue3-onMounted1：组件挂载了执行')
    })

    onMounted(() => {
      /**
       * 使用场景：
       * 1. 发送ajax请求
       * 2. 操作dom
       */
      console.log('vue3-onMounted2：组件挂载了执行')
    })

    return {}
  },
  mounted () {
    console.log('vue2-mounted')
  }
}
</script>

<style lang="scss" scoped>
</style>
